<script setup lang="ts">
import { reactive, ref } from 'vue';

const formRef = ref();
const state = reactive({
  ruleForm: {
    id: '',
    name: '',
    remark: ''
  },
  rules: {
    name: {
      required: true, message: '请输入角色名称', trigger: ['blur']
    }
  }
});
defineExpose({
  state,
  formRef
});
</script>

<template>
  <n-form ref="formRef" :model="state.ruleForm" :rules="state.rules" label-placement="left" label-width="100" require-mark-placement="left">
    <n-grid responsive="screen" item-responsive>
      <n-form-item-gi span="24" label="角色名称" path="name">
        <n-input v-model:value="state.ruleForm.name" placeholder="请输入角色名称" clearable></n-input>
      </n-form-item-gi>
      <n-form-item-gi span="24" label="备注" path="remark">
        <n-input v-model:value="state.ruleForm.remark" placeholder="请输入备注" clearable></n-input>
      </n-form-item-gi>
    </n-grid>
  </n-form>
</template>

<style scoped>

</style>
